/*
    <div class="HBox" data-gap="50px">
    ...
    </div>
 */
$(function() {

    var $hBoxList = $(".HBox");

    for(x=0; x<$hBoxList.length; x++) {

        var $hbox = $($hBoxList[x]);

        var gap = $hbox.attr("data-gap");
        var spacer = "<div style='width: " + gap + "; display: inline-block'></div>";
        var $wrapper = $("<div style='display: inline-block;'></div>");

        var $children = $hbox.children();
        $hbox.empty();

        if($children.length > 0) {
            var child = $children[0];
            $hbox.append($wrapper.clone().append(child));
        }

        if($children.length > 1) {
            for(y=1; y<$children.length; y++) {
                var child = $children[y];
                $hbox.append(spacer);
                $hbox.append($wrapper.clone().append(child));
            }
        }
    }
});